<template>
  <section class="nb-transfer-wrapper">
    <div class="left-content content">
      <div class="title-content">隐藏字段</div>
      <div class="list-wrapper">
        <div class="list-item" v-for="(item, index) in hideData" :key="item.id">
          <span class="icon el-icon-circle-plus add" @click="add(index)"></span>
          <span class="value">{{item.propDesc}}</span>
        </div>
      </div>
    </div>
    <div class="right-content content">
      <div class="title-content">显示字段</div>
      <div class="list-wrapper">
        <transition-group tag="div" name="list">
          <div class="list-item" v-for="(item, index) in cloneValue" :key="item.id">
            <el-tooltip class="item" effect="dark" content="不可隐藏" placement="left" v-if="item.required === 1">
              <span class="icon el-icon-remove red"  :class="{disabled: item.required === 1}"></span>
            </el-tooltip>
            <span class="icon el-icon-remove red" v-else @click="remove(index)" ></span>
            <span class="value">{{item.propDesc}}</span>
            <div class="btn-wrapper">
              <span @click="up(index)" class="btn-icon el-icon-arrow-up" :class="{disabled: index === 0}"></span>
              <span @click="down(index)" class="btn-icon el-icon-arrow-down" :class="{disabled: index === cloneValue.length - 1}"></span>
            </div>
          </div>
        </transition-group>
      </div>
    </div>
  </section>
</template>

<script>
  import {map} from 'lodash'
  export default {
    data () {
      return {
        cloneValue: this.value
      }
    },
    props: {
      value: {
        type: Array,
        default: () => {
          return []
        }
      },
      data: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    watch: {
      value () {
        this.cloneValue = this.value
      },
      cloneValue (val) {
        this.$emit('input', val)
      }
    },
    computed: {
      hideData () {
        return this.data.filter(item => {
          return map(this.cloneValue, 'id').indexOf(item.id) === -1
        })
      },
      showData () {
        return this.data.filter(item => {
          return map(this.cloneValue, 'id').indexOf(item.id) === -1
        })
      }
    },
    methods: {
      remove (index) {
        this.cloneValue.splice(index, 1)
      },
      add (index) {
        let data = this.hideData.slice(index, index + 1)
        this.cloneValue = this.cloneValue.concat(data)
      },
      up (index) {
        if (index === 0) return
        let data = this.cloneValue.splice(index, 1)
        this.cloneValue.splice(index - 1, 0, data[0])
      },
      down (index) {
        if (index >= this.cloneValue.length - 1) return
        let data = this.cloneValue.splice(index, 1)
        this.cloneValue.splice(index + 1, 0, data[0])
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.nb-transfer-wrapper{
  display: flex;
  width: 100%;
  height: 400px;
  .content{
    width: 50%;
    flex: 0 0 50%;
    box-sizing: border-box;
    .title-content{
      padding: 5px 20px;
      font-size: 13px;
      color: #aaa;
      background: #fafafa;
    }
    .list-wrapper{
      height: 366px;
      overflow-y: auto;
      padding-left: 20px;
      .list-item{
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
        padding: 7px 0;
        .icon{
          font-size: 16px;
          margin-right: 10px;
          cursor: pointer;
          position: relative;
        }
        .icon.disabled{
          cursor: default;
        }
        .message:after{
          content: '不可隐藏';
          position: absolute;
          padding: 5px 10px;
          border-radius: 10px;
          background: rgba(0,0,0,.8);
          color: white;
          font-size: 12px;
          width: 49px;
        }
        .add{
          color: #0dca99;
        }
        .red{
          color: red;
        }
        .value{
          flex: 1;
          margin-right: 5px;
          overflow: hidden;
          word-break: keep-all;
          text-overflow: ellipsis;
        }
        .btn-wrapper{
          font-size: 0;
          display: none;
          align-items: center;

          .btn-icon{
            width: 15px;
            height: 15px;
            border-radius: 2px;
            margin-right: 15px;
            border: 1px solid #eee;
            font-size: 13px;
            line-height: 15px;
            text-align: center;
            cursor: pointer;
          }
          .el-icon-arrow-up{
            margin-right: 10px;
          }
          .btn-icon.disabled{
            cursor: default;
            opacity: 0.4;
          }
        }
      }
      .list-item:hover{
        .btn-wrapper{
          display:flex;
        }
      }
    }
  }
  .right-content{
    border-left: 1px solid #eee;
  }
}
  .list-move{
    transition: all 0.3s;
  }
</style>
